<template>
  <div class="body">
    <ul class="one">
      <router-link to="">
        <li>
          <i class="iconfont icon-video"> </i>
          <div>新闻资讯</div>
        </li>
      </router-link>
      <router-link to="">
        <li>
          <i class="iconfont icon-pic"> </i>
          <div>图片分享</div>
        </li>
      </router-link>
      <router-link to="">
        <li>
          <i class="iconfont icon-bags"> </i>
          <div>商品购买</div>
        </li>
      </router-link>
    </ul>
    <ul class="two">
      <router-link to="">
        <li>
          <i class="iconfont icon-mobilephone"> </i>
          <div>留言反馈</div>
        </li>
      </router-link>
      <router-link to="">
        <li>
          <i class="iconfont icon-training"> </i>
          <div>视频专区</div>
        </li>
      </router-link>
      <router-link to="">
        <li>
          <i class="iconfont icon-phone"> </i>
          <div>联系我们</div>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>

.body {
  margin-top: 80px;
  overflow: hidden;
  width: 100%;
  height: 150px;

  .one {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-content: center;
    justify-content: space-around;
   
    height: 75px;
    li {
      i {
        color: red;
      
    
      }
      cursor: pointer;
     color: black;
    }
  }
  .two {
    height: 75px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-content: end;
    justify-content: space-around;
    li {
      i {
        color: red;
      
      }

      cursor: pointer;
     
    }
    li:before{
      content: '';
      height: 100px;
      width: 100px;
      background-color: red;
    }
  }
}
</style>
